Magento 2 Grunt watch

Installing and configuring Grunt

Magento has built-in Grunt tasks configured, but there are still several prerequisite steps you need to take to be able to use it:

1. Install node.js to any location on your machine.
2. Install Grunt CLI tool globally. To do this, run the following command in a command prompt:

   npm install -g grunt-cli
   

3. Install Grunt in your Magento directory. To do this, run the following commands in a command prompt:

   cd <your_Magento_instance_directory>
   npm install grunt --save-dev
   

4. Install (or refresh) the node.js project dependency for your Magento instance. To do this, run the following commands in a command prompt:

   cd <your_Magento_instance_directory>
   npm install
   npm update
   

5. Add your theme to Grunt configuration. To do this, in thedev/tools/grunt/configs/themes.js file, add your theme to module.exports like following:

   module.exports = {
       <theme>: {
           area: 'frontend',
           name: '<Vendor>/<theme>',
           locale: '<language>', 
           files: [
               '<path_to_file1>', //path to root source file
               '<path_to_file2>'
           ],
           dsl: 'less'
       },
   

   Where the following notation is used:

   • <theme>: your theme code, conventionally should correspond to the theme directory name.
   • <language>: specified in the ‘code_subtag’ format, for example en_US. Only one locale can be specified here. To debug the theme with another locale, create one more theme declaration, having specified another value for language
   • <path_to_file>: path to the root source file, relative to theapp/design/frontend/<Vendor>/<theme/>web directory. You need to specify all root source files of the theme. If your theme inherits from a certain theme, and does not contain its own root source files, specify the root source files of the parent theme.
6. (Optional) If you want to use Grunt for “watching” changes automatically, without reloading pages in a browser each time, install the LiveReload extension in your browser.

Grunt commands

The following table describes the grunt commands you can use performing different customization tasks. Run all commands from your Magento installation directory.

grunt clean:<theme>

grunt clean:blank

grunt exec:<theme>

grunt less:<theme>

grunt watch

etap watch

1. exécuter  grunt exec:<theme>
2.  grunt watch